<template>
  <div>
    <el-card>
      <el-descriptions title="个人信息" :colon="false">
        <el-descriptions-item>
          <novel-cz-hz>
            <template slot="center">
              <el-avatar
                :src="writerInfo.headPortraitUrl"
                :size="90"
              ></el-avatar>
            </template>
            <template slot="footer">{{ writerInfo.nickName }}</template>
          </novel-cz-hz>
        </el-descriptions-item>
        <el-descriptions-item>
          <novel-cz>
            <template slot="center">{{ writerInfo.creationDays }}</template>
            <template slot="footer">创作天数</template>
          </novel-cz>
        </el-descriptions-item>
        <el-descriptions-item>
          <novel-cz>
            <template slot="center">{{
              writerInfo.cumulativeNumberOfWords
            }}</template>
            <template slot="footer">累计字数</template>
          </novel-cz></el-descriptions-item
        >
      </el-descriptions>
    </el-card>
    <br />
    <el-card>
      <div>
        <span>作品管理</span>
        <span style="float: right" @click="toGl">更多>></span>
        <span style="float: right; margin-right: 20px" @click="createBook">
          <i class="el-icon-plus"></i>新建作品</span
        >
      </div>
      <el-divider />
      <div class="tuhp" v-if="book">
        <el-image
          style="width: 150px; height: 180px"
          :src="book.bookImgUrl"
          fit="cover"
        ></el-image>
        <div class="kInfo" style="width: 100%; margin-left: 20px">
          <div>
            <span class="title" style="line-height: 24px">{{
              book.bookName
            }}</span>
            <span style="float: right; line-height: 24px"
              >编辑id:{{ book.editorId }}</span
            >
          </div>
          <div>
            <span style="" class="lastChapter">{{ book.lastChapterName }}</span>
          </div>
          <div class="zbu">
            <span style="line-height: 40px">收藏:{{ book.subscription }}</span>
            <div style="float: right">
              <el-button type="primary" @click="updateBook(book)"
                >信息设置</el-button
              >
              <el-button
                type="success"
                @click="thenSale(book)"
                v-if="book.saleState == 'OFF_SALE'"
                >上架</el-button
              >
              <el-button
                type="success"
                @click="theBookIsOver(book)"
                v-if="
                  book.saleState == 'ON_SALE' &&
                  book.continuedState == 'SERIALIZE'
                "
                >立刻完本</el-button
              >
              <el-button @click="edit(book.id)" type="info">去写作</el-button>
            </div>
          </div>
        </div>
      </div>
      <el-empty v-else :image-size="200"></el-empty>
    </el-card>
  </div>
</template>

<script>
import NovelCz from "@/components/NovelCz.vue";
import NovelCzHz from "@/components/NovelCzHz.vue";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import { inSerial, sale, getWriter, theBookIsOver } from "@/api";
export default {
  components: { NovelCz, NovelCzHz },
  data() {
    return {
      writerInfo: {
        id: 2,
        nickName: "",
        headPortraitUrl: "",
        briefIntroduction: null,
        bookCount: 0,
        cumulativeNumberOfWords: 0,
        creationDays: 0,
      },
      book: {
        id: 24,
        bookName: "三体",
        writerId: 2,
        editorId: null,
        createTime: "2022-05-17 17:29:20:000",
        synopsis: "来xxxxx阅读我的更多作品吧！",
        // bookImgUrl:
        //   "http://localhost:8001/resource/BOOK/COVER/77389729_p0_master1200.jpg",
        bookUrl: "C:\\Users\\YKH\\Desktop\\resource\\BookWarehouse\\2\\三体",
        wordCount: 22969,
        chapter: 4,
        subscription: 0,
        recentVisit: 0,
        continuedState: "SERIALIZE",
        lastChapterName: "射手和农场主(1)",
        lastChapterId: 65,
        updateTime: "2022-05-17 18:23:29:000",
        catalogName: "东方玄幻",
        chapterUnitPrice: null,
        chapterServiceCharge: null,
        serviceCharge: null,
        integral: null,
        earningsOther: null,
        earnings: null,
        recentIntegral: null,
        promotion: 33,
        saleState: "ON_SALE",
        deleteState: 0,
      },
    };
  },

  methods: {
    ...mapMutations("routeJump", ["WriterActive", "edit"]),
    theBookIsOver(book) {
      console.log("index","--------------");
      theBookIsOver(book.id)
        .then(({ data }) => {
          if (data.code == 0) {
            this.$message.success("书籍完本成功");
            this.book.continuedState = "CONCLUDE";
            // this.worksAll.splice(index, 1, book);
          }
        })
        .catch((err) => {});
    },
    thenSale(book, index) {
      sale(book.id)
        .then(({ data }) => {
          if (data.code == 0) {
            this.$message.success("书籍上架成功");
            this.book.saleState = "NO_SALE";
            // this.worksAll.splice(index, 1, book);
          }
        })
        .catch((err) => {});
    },
    updateBook(book) {
      console.log(book, "-------updateBook-------");
      this.$router.push({
        name: "createBook",
        params: {
          bookId: book.id,
        },
      });
    },
    createBook() {
      this.$router.push({
        name: "createBook",
        params: {
          bookId: 0,
        },
      });
    },
    toGl() {
      this.WriterActive("2");
      this.$router.push({
        name: "workManagement",
      });
    },
  },
  created() {
    getWriter()
      .then(({ data }) => {
        console.log(data, "--------getWriter----------");
        this.writerInfo = data.data;
      })
      .catch((err) => {});
    inSerial()
      .then(({ data }) => {
        console.log(data,"-------inSerial-----");
        if(data.code == 300){
          this.book = null
          return;
        }
        this.book = data.data;
      })
      .catch((err) => {});
  },
};
</script>

<style scoped>
.tuhp {
  display: flex;
  justify-content: flex-start;
}
.title {
  font-size: 2.3em;
  font-weight: bolder;
}
.kInfo {
  position: relative;
}
.zbu {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.lastChapter {
  line-height: 42px;
  color: rgba(21, 26, 48, 0.5);
  font-size: 1.5em;
}
</style>